<template>
	<view class="content" :style="{ 'background': bgColor }">
		<camera style="width: 500rpx; height: 500rpx;border-radius: 50%;" device-position="front" frame-size="medium"
			bindcameraerror="onCameraError" bindframe="onCameraFrame" v-if="!isCheck"></camera>
		<video id="video" style="display: none;" bindpause="onVideoPause" v-if="!isCheck"></video>

		<view v-if="isCheck">
			<view class="pop-box">
				<view class="top-box">
					<image src="../../static/images/gou.png"></image>
					<view>签署成功，感谢信赖！</view>
				</view>

				<view class="info-box">
					<view style="color: rgba(128, 128, 128, 1);">合同编号</view>
					<view style="color: rgba(65, 136, 239, 1)">{{ contractInfo.id }}</view>
				</view>

				<view class="btn-download-box">
					<view class="btn-download" @click="preview()">查看合同</view>
				</view>

				<image class="star1" src="../../static/images/star.png"></image>
				<image class="star2" src="../../static/images/star.png"></image>
				<image class="star3" src="../../static/images/star.png"></image>
				<image class="star4" src="../../static/images/star.png"></image>
				<view class="round-box">
					<view class="round1"></view>
					<view class="round2"></view>
					<view class="round3"></view>
					<view class="round4"></view>
					<view class="round5"></view>
					<view class="round6"></view>
					<view class="round7"></view>
				</view>
				<view class="bottom-box">
					<view class="bottom-left">
						<image src="../../static/images/logo-white.png"></image>
						<view>签署成功，感谢信赖！</view>
					</view>
					<view class="onemore" @click="toContract()">再签一份</view>
				</view>
				<image class="bottom" src="../../static/images/bottom.png"></image>
			</view>

			<view class="close-btn" @click="toContract()">
				<image src="../../static/images/close-pop.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		checkRealNameApi
	} from "@/api/auth.js"
	import {
		fail
	} from "assert";
	export default {
		data() {
			return {
				bgColor: null,
				cameraContext: null,
				videoContext: null,
				faceImg: '',
				isCheck: false,
				timer: null,
				contractInfo: '',
			}
		},
		onReady() {
			this.checking()
		},
		methods: {
			onCameraError(e) {
				console.log('Camera error:', e.detail);
			},
			checking() {
				this.cameraContext = uni.createCameraContext()
				this.videoContext = uni.createVideoContext('video')
				this.changeColor()
				setTimeout(() => {
					this.cameraContext.takePhoto({
						quality: 'high',
						success: (res) => {
							uni.getFileSystemManager().readFile({
								filePath: res.tempImagePath,
								encoding: 'base64',
								success: (readResult) => {
									this.faceImg = readResult.data
									this.checkRealName()
								},
								fail: (error) => {
									this.goback()
									uni.$u.toast('获取失败')
									console.log(error);
								}
							});
						},
						fail: (e) => {
							this.goback()
							uni.$u.toast('获取失败')
							console.log(e);
						}
					});
				}, 5000)
			},
			changeColor() {
				let currentIndex = 0
				const col = ['red', 'green', 'blue']
				const changeColor = () => {
					this.bgColor = col[currentIndex]
					currentIndex = (currentIndex + 1) % col.length
				}
				changeColor()
				this.timer = setInterval(() => changeColor(), 1000)
			},
			async checkRealName() {
				this.contractInfo = uni.getStorageSync('faceInfo')
				const form = {
					contractId: this.contractInfo.id,
					base64File: this.faceImg
				}
				await checkRealNameApi(form).then(res => {
					if (res.code == 200) {
						uni.$u.toast('认证成功')
						this.isCheck = true
						clearInterval(this.timer)
						this.bgColor = 'rgba(0, 0, 0, 0.5)'
					} else {
						uni.$u.toast(res.msg)
						setTimeout(() => {
							this.goback()
						}, 1000)
					}
				})
			},
			goback() {
				uni.navigateBack({
					delta: 2
				});
			},
			toContract() {
				uni.navigateBack({
					delta: 3
				});
			},
			preview() {
				const url = uni.getStorageSync('contract')
				uni.openDocument({
					showMenu: true,
					filePath: url,
					fileType: 'pdf',
					success: function(res) {
						console.log('打开文档成功');
					},
					fail: (e) => {
						console.log(e);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: calc(100% + 60rpx);
		height: 100vh;
		margin-left: -30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.pop-box {
			width: 570rpx;
			height: 754rpx;
			border-radius: 30rpx;
			background: linear-gradient(180deg, rgba(125, 248, 255, 1) 0%, rgba(65, 136, 239, 1) 100%);
			box-shadow: 0rpx 2rpx 8rpx 4rpx rgba(0, 0, 0, 0.1);
			position: relative;
			overflow: hidden;

			.top-box {
				display: flex;
				align-items: center;
				margin: 52rpx 0 0 48rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #fff;
				z-index: 10;

				image {
					width: 56rpx;
					height: 56rpx;
					margin-right: 20rpx;
				}
			}

			.info-box {
				width: 478rpx;
				height: 100rpx;
				padding: 0 16rpx 0 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 6rpx;
				background: rgba(120, 203, 255, 0.24);
				box-shadow: 0rpx 2rpx 4rpx rgba(92, 176, 28, 0.12);
				position: absolute;
				bottom: 300rpx;
				left: 28rpx;
				z-index: 10;
				font-size: 24rpx;
				font-weight: 700;
			}

			.btn-download-box {
				width: 100%;
				position: absolute;
				bottom: 180rpx;
				z-index: 10;

				.btn-download {
					width: 176rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 28rpx;
					background: rgba(65, 136, 239, 1);
					text-align: center;
					font-size: 22rpx;
					color: #fff;
					margin: 0 auto 0 auto;
				}
			}



			.star1 {
				width: 42rpx;
				height: 42rpx;
				position: absolute;
				top: 18rpx;
				right: 118rpx;
			}

			.star2 {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				top: 56rpx;
				right: 94rpx;
			}

			.star3 {
				width: 42rpx;
				height: 42rpx;
				position: absolute;
				top: 142rpx;
				left: 110rpx;
			}

			.star4 {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				top: 178rpx;
				left: 150rpx;
			}

			.round-box {
				width: 100%;
				height: 370rpx;
				background: #fff;
				position: absolute;
				bottom: 90rpx;

				view {
					border-radius: 50%;
					background: #fff;
				}

				.round1 {
					width: 220rpx;
					height: 220rpx;
					position: absolute;
					top: -154rpx;
					left: -80rpx;
				}

				.round2 {
					width: 150rpx;
					height: 150rpx;
					position: absolute;
					top: -76rpx;
					left: 76rpx;
				}

				.round3 {
					width: 114rpx;
					height: 114rpx;
					position: absolute;
					top: -42rpx;
					left: 204rpx;
				}

				.round4 {
					width: 164rpx;
					height: 164rpx;
					position: absolute;
					top: -76rpx;
					right: 112rpx;
				}

				.round5 {
					width: 312rpx;
					height: 312rpx;
					position: absolute;
					top: -204rpx;
					right: -138rpx;
				}

				.round6 {
					width: 252rpx;
					height: 252rpx;
					background: rgba(255, 255, 255, 0.3) !important;
					position: absolute;
					top: -120rpx;
					left: 20rpx;
				}

				.round7 {
					width: 258rpx;
					height: 258rpx;
					background: rgba(255, 255, 255, 0.3) !important;
					position: absolute;
					top: -120rpx;
					right: 60rpx;
				}
			}

			.bottom-box {
				width: calc(100% - 66rpx);
				height: 100rpx;
				position: absolute;
				bottom: 0;
				z-index: 10;
				display: flex;
				justify-content: space-between;
				padding: 0 28rpx 0 38rpx;
				align-items: center;

				image {
					width: 50rpx;
					height: 56rpx;
					margin-right: 24rpx;
				}

				.bottom-left {
					display: flex;
					font-size: 22rpx;
					letter-spacing: 2rpx;
					color: #fff;
					align-items: center;
				}

				.onemore {
					width: 146rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 20rpx;
					background: rgba(255, 255, 255, 1);
					color: rgba(65, 136, 239, 1);
					font-size: 20rpx;
					letter-spacing: 2rpx;
				}
			}

			.bottom {
				width: calc(100% + 2rpx);
				height: 112rpx;
				position: absolute;
				bottom: 0;
			}
		}

		.close-btn {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background: #fff;
			margin: 38rpx auto 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 26rpx;
				height: 26rpx;
			}
		}
	}
</style>